<!-- 管理 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="2" />
      <el-col :span="4" style="padding: 0px">
        <el-card style="position: fixed; width: 15%">
          <div>
            <h3 style="text-align: center">答题卡</h3>
            <el-divider />
            <div v-for="(item, index) in pageData">
              <p>
                {{ index + 1 }}、{{ item.title }}（单选题{{ item.score }}分）
              </p>
              <div mt-3>
                <div class="exam-box" v-for="(opt, num) in item.test">
                  {{ num + 1 }}
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div class="question-lst" v-for="(item, index) in pageData">
            <h3>
              {{ index + 1 }}、{{ item.title }}（单选题{{ item.score }}分）
            </h3>
            <el-divider />
            <div class="question-box" v-for="(opt, num) in item.test">
              <div>
                {{ num + 1 }}.<span v-html="opt.title"></span
                ><el-tag
                  key="item.label"
                  type="info"
                  class="mx-1"
                  effect="dark"
                  ml-3
                  round
                >
                  单选题5分
                </el-tag>
              </div>
              <div mt-3>
                <ul>
                  <li
                    v-for="(i, nums) in opt.options"
                    @click="checkSubject(i, nums, num, index)"
                  >
                    <span
                      class="option-strong"
                      :class="[i.is_check == 1 ? 'choice-question' : '']"
                      value="A"
                      >A</span
                    >
                    <span class="select-content">{{ i.title }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4" style="padding: 0px">
        <el-card style="position: fixed; width: 15%">
          <div style="text-align: center">
            <h3>剩余时间</h3>
            <span>30分0秒</span>
            <el-divider />
            <h3>答题进度</h3>
            <el-progress :percentage="50" status="success">
              <span>1/5</span>
            </el-progress>
          </div>
        </el-card>
      </el-col>
      <el-col :span="2" />
    </el-row>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Exam",
  inheritAttrs: false,
});
import { getTestPaper } from "@/api/exam";
const pageData = ref<[]>(); //
const total = ref(0);
function handleQuery() {
  getTestPaper()
    .then(({ data }) => {
      pageData.value = data;
    })
    .finally(() => {});
}
function checkSubject(
  options: any,
  index: number,
  num1: number,
  index1: number
) {
  pageData.value[index1].test[num1].options[index].is_check =
    options.is_check == 1 ? 0 : 1;
}
onMounted(() => {
  handleQuery();
});
</script>
<style lang="scss" scoped>
.exam-box {
  width: 35px;
  height: 35px;
  border: 1px solid #f2f2f2;
  display: inline-block;
  border: 1px solid #cecece;
  background-color: #f4f4f4;
  color: #acacac;
  text-align: center;
  line-height: 35px;
  border-radius: 3px;
  margin: 0 10px 10px 0;
  cursor: pointer;
}
.question-box ul > li {
  line-height: 28px;
  color: #666666;
  align-items: center;
  align-content: center;
  margin-bottom: 25px;
  cursor: pointer;
}
.question-box > ul > li > span {
  display: inline-block;
  vertical-align: middle;
}
.question-box .option-strong {
  border-radius: 50%;
}
.question-box .option-strong {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  line-height: 26px;
  border: 1px solid #a7a7a7;
  color: #a7a7a7;
  text-align: center;
  cursor: pointer;
}
.question-box .select-content {
  line-height: 22px;
  margin-left: 20px;
}
.question-box ul > li > span {
  display: inline-block;
  vertical-align: middle;
}
.topic-active {
  border: 1px solid #c2e4ff;
  background-color: #c2e4ff;
  color: #128beb;
}
.choice-question {
  background-color: #128beb;
  border: 1px solid #128beb;
}
</style>
